<template>
	<view class="kuang">
		<image class="bj" src="/static/图层 1@3x.png" mode=""></image>
		<text class="title">已完成订单</text>
	</view>
	<view class="jiantou" @click="goBack"></view>

	<view class="panel">
		<view class="section">
			<view class="section-hd">
				<text class="section-title">订单信息</text>
				<text class="status">已完成</text>
			</view>
			<view class="divider"></view>
			<view class="line"><text class="label">订单号：</text><text>121212112487878</text></view>
			<view class="line"><text class="label">服务项目：</text><text>车辆保养</text></view>
			<view class="line"><text class="label">服务门店：</text><text>大宝车辆维修店</text><text class="pos"> </text></view>
			<view class="line"><text class="label">下单时间：</text><text>2023-03-08 17:40</text></view>
			<view class="line"><text class="label">预约时间：</text><text>2023-03-09 17:40</text></view>
			<view class="line"><text class="label">车辆：</text><text>奔驰FWE4/豫A98FHJ</text></view>
			<view class="line"><text class="label">备注：</text><text></text></view>
		</view>

		<view class="section">
			<text class="section-title">订单详情</text>
			<view class="divider"></view>
			<view class="detail-row"><text>车辆精洗</text><text class="price">¥ 39.90</text></view>
			<view class="detail-row"><text>车辆附加费用</text><text>0</text></view>
			<view class="detail-row"><text>原价</text><text>¥ 59.90</text></view>
			<view class="detail-row"><text>店家优惠</text><text class="minus">- ¥ 20</text></view>
			<view class="detail-row"><text>优惠券</text><text class="minus">- ¥ 10</text></view>
			<view class="total"><text>支付金额</text><text class="total-num">¥ 29.9</text></view>
		</view>

		<view class="section">
			<text class="section-title">评价结果</text>
			<view class="divider"></view>
			<view class="line"><text class="label">评价时间：</text><text>2023-04-10 11:09</text></view>
			<view class="line ai-center"><text class="label">评价结果：</text><uni-rate :value="4" readonly size="20" color="#E0E0E0" active-color="#FFD54F"/></view>
			<view class="line comment-line"><text class="label nowrap">评语：</text><text class="comment">评语评语评语评语评语评语评语评语评语评语</text></view>
		</view>
	</view>
</template>

<script setup>
function goBack(){
	uni.navigateBack({ delta: 1 })
}
</script>

<style scoped>
	.bj { position: absolute; z-index: 1; width: 750rpx; height: 430rpx; }
	.kuang { display: flex; justify-content: center; }
	.title { font-size: 35rpx; position: absolute; z-index: 2; color: white; margin-top: 60rpx; }
	.jiantou { position: absolute; z-index: 2; width: 30rpx; height: 30rpx; border: 5rpx solid white; border-top: none; border-left: none; transform: rotate(135deg); margin-top: 60rpx; margin-left: 30rpx; }
	.panel { position: absolute; z-index: 2; width: 710rpx; margin: 140rpx 20rpx 40rpx; }
	.section { background: #fff; border-radius: 24rpx; padding: 24rpx; margin-bottom: 24rpx; }
	.section-hd { display:flex; align-items:center; justify-content:space-between; }
	.section-title { font-size: 32rpx; font-weight: 600; }
	.status { color: #ff4d4f; }
	.divider { height: 2rpx; background: #f2f2f2; margin: 16rpx 0; }
	.line { margin: 10rpx 0; color: #333; display:flex; }
	.label { color: #6b6b6b; margin-right: 8rpx; }
	.nowrap { white-space: nowrap; }
	.comment-line { align-items:flex-start; }
	.comment { flex: 1; word-break: break-all; line-height: 1.6; }
	.detail-row { display:flex; justify-content:space-between; padding: 14rpx 0; }
	.price { color:#111 }
	.minus { color:#ff4d4f }
	.total { display:flex; justify-content:space-between; align-items:center; margin-top: 10rpx; }
	.total-num { font-size: 40rpx; font-weight: 700; color:#111 }
	.ai-center { align-items:center }
</style>


